Trimming The Cruft

Trimming The Cruft:
Getting the most of your bits

Peter Higgins (dante)
Dojo Toolkit Project Lead
DevNexus: March 10 + 11, 2009

What is Dojo?

• A JavaScript Toolkit
- Light-weight Base.
- Use at will framework.
• 100 - point Open Source
- Clean IP
- Open Cycle
• Developer Tools

The History of Dojo
(cli notes version)

Plain JavaScript

• JavaScript should have:
- dojo.indexOf / forEach / map / lter
- hitch / partial
- declare / delegate / mixin / extend

Package / Module Loading

• dojo.require(“some.module”)
• dojo.addOnLoad(function(){ ... })
• dojo.registerModulePath(“my”, “../../my/”)
• dojo.require(“my.code”)
• dojo.provide(“my.code”)

Events, Ajax, FX, DOM

• dojo.connect(node, “onclick”, function(){ });
• dojo.connect(obj, “custom”, obj, “sync”);
• dojo.xhrPost({ form:”login”, load:function(dat){}});
• dojo.xhrGet({ url:”foo.txt”, load:function(){ } });
• dojo.anim(node, { width:200 });
• dojo.fadeIn({ node: node }).play();
• dojo.style(n, “height”, “50px”);
• dojo.place(“<p>Hi</p>”, dojo.body());

CSS Selectors

• dojo.query(“ul > li”).addClass(“listy”);
• dojo.query(“a”).onclick(function(){ });
• dojo.query(“tr td + td”).forEach(function(n){ });
• dojo.query(“.someClass”).map(function(n){ .. });
• dojo.NodeList.prototype / dojo.extend

Flexible Dynamic Language

// confuse people
(function(foo){
var f = foo, fid = f.byId;
f.require(“my.code”);
f.addOnLoad(function(){
new my.Thinger({ node: fid(‘bar’) });
});
})(dojo);

// bling
(function(d, $){
$(“.class”).onclick(function(){ });
})(dojo, dojo.query);

Scripts are Blocking,
Synchronous.

<head>
<script src=”dojo.js”></script>
<script>/* code in dojo.js ready */</script>
</head>
<body><p>Lots of DOM</p></body>

vs:

<body>
<p>Lots of DOM</p>
<script src=”dojo.js”></script>
<script>/* code in dojo.js ready */</script>
</body>

gzip “required”.

• Incredible, exponential savings.
- Bene ts from patterns
• 9 / 10 Major Browsers Support

CSS is “async”

• No reliable “onload”
• Put requests rst
• Limit @import

De ne “ready”

• DOMContentLoaded & window.onload
• CSS, JS and Image resources
- required or deferred?
- preloaded and cached.

CDN Bene ts

• Shared Resources
- Cached, common, static
• Public vs Private
• Headers / Cookies
• Beating request limits

Client Considerations
(on the wire cost)

DOM & CSS

• Size
• Complexity
• Manipulation
- Avoiding loops
- working outside the DOM
• Server vs Client

Events

• Delegation
- Normalization
- Bubbles, Cancels
• Invention
- mouseenter/mouseleave
- onDijitClick

Code Considerations
(also on the client)

More on Packages

// the package:
dojo.provide(“my.Module”); // my/Module.js
dojo.require(“my._ClassBase”); // my/_ClassBase.js
dojo.declare(“my.Module”, my._ClassBase, {});

// the code:
dojo.require(“my.Module”);
dojo.addOnLoad(function(){
new my.Module();
});

Arguments, etc.

// function signatures with defaults
my.func = function(args){
var opts = dojo.mixin({
prop:”foo”
}, args||{});
console.log(opts.prop);
}

my.func(); // “foo”
my.func({ prop:”bar” }); // “bar”

Ambiguous Constructors

dojo.declare(“some.Thing”, null, {
opt:”a-default”,
constructor: function(args){
dojo.mixin(this, args);
}
});

var a = new some.Thing(), b = new some.Thing({ opt:”x” });
a.opt == “a-default”
b.opt == “x”

DRY

my.turnIt = function(dir){
// if 1, go next. -1, go left.
}

var next = dojo.partial(my.turnIt, 1),
prev = dojo.partial(my.turnIt, -1);

// later
dojo.query(“.nextbutton”).onclick(next);

Dual Service Functions

my.func = function(node, args){
node = dojo.byId(node); // Sting|DomNode
/* do something to node */
}

dojo.extend(dojo.NodeList, {
func: dojo.NodeList._mapAsForEach(“func”, my)
});

// run one, run all
my.func(“someId”, { opts:true });
dojo.query(“.someNodes”).func({ opts:true })

To consider:

• YUI / ShrinkSafe / jsmin / packer
- variables, whitespace
- preserve public APIs
• Micro vs. Premature optimizations
- For GZIP
- For ShrinkSafe

All-in-One

• Works transparently with Package System
• Group modules into layers
• Concatenate CSS into layers
• Layer & File mini cation
- Comments, Whitespace, newlines ...

Special Builds

• Stubs (6k dojo.js)
• Base++ (dojo.js with modules)
• Cross-Domain
• WebKit Mobile
• plugd
• Maven

Build Options

• #ifDef
- WebKit Mobile
• stripConsole
• internStrings

Me, Again.
dante@dojotoolkit.org
http://twitter.com/phiggins
http://higginsforpresident.net/

Trimming The Cruft

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Trimming The Cruft

Similar to Trimming The Cruft (20)

Recently uploaded

Recently uploaded (20)

Trimming The Cruft